<!--
 * @Author: your name
 * @Date: 2021-12-17 13:05:05
 * @LastEditTime: 2021-12-17 18:54:41
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \12.14vue\my-app\src\views\Add.vue
-->
/<template>
  <div class="add">
    <Header name="新增发票抬头" />
    <div class="add_con">
      <Vcure name="抬头类型">
        <span
          v-for="(item, index) in title"
          :key="index"
          class="spanTab"
          @click="changeIndex(index)"
          :class="{active:form.activeIndex==index}"
          >{{ item }}</span
        >
      </Vcure>
      <Vcure name="抬头名称">
        <input type="text" placeholder="必填,公司名称" v-model="form.name"/>
      </Vcure>
      <Vcure name="税号" v-if="form.activeIndex!=2">
        <input type="text" placeholder="纳税人识别号" v-model="form.duty"/>
      </Vcure>
      <Vcure name="邮箱">
        <input type="text" placeholder="请填写常用邮箱(选填)" v-model="form.email"/>
      </Vcure>
      <Vcure name="专用发票" v-if="form.activeIndex!=2">
        <Switchs v-model="form.isinvoice" name="isinvoice"/>
      </Vcure>
      <Vcure name="是否默认">
        <Switchs v-model="form.isdefault" name="isdefault"/>
      </Vcure>
    </div>
    <button v-if="activeId" @click="delList(form.id)">删除</button>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
import Header from "../components/Header";
// 引入插槽
import Vcure from "../components/Vcure.vue";
// 引入按钮
import Switchs from "../components/Switch.vue";

import axios from "axios"

export default {
  components: {
    Header,
    Vcure,
    Switchs,
  },
  data() {
    return {
      title: ["企业", "非企业单位", "个人"],
      form:{
        activeIndex: 0,
        name:"",
        duty:"",
        email:"",
        isinvoice:0,
        isdefault:0
      },
      activeId:null
    };
  },
  async created () {
      if(this.$route.query.id){
        let {id}=this.$route.query
        console.log(id);
        this.activeId=id
        let res=await axios.get("/api/list/"+id)
        this.form=res.data
      }
  },
  methods: {
    // 改变下标
    changeIndex(index){
      this.form.activeIndex=index
    },
    // 点击删除
    async delList(id){
        let res=await axios.delete("/api/list/"+id)
        if(res.status==200||res.status==201){
            this.$router.push({
              path: '/list',
            })
          }
    },
    // 点击提交
    async submit(){
      if(this.form.isdefault){
        let item=await axios.get("/api/list?isdefault=1")
        console.log(item);
        item.data.length>0&&await axios.put("/api/list/"+item.data[0].id,{
          ...item.data[0],
          isdefault:0
        })
      }
      let res;
      
      if(this.form.name){
        if(this.activeId){
          res=await axios.put("/api/list/"+this.activeId,this.form)
        }else{
          res=await axios.post("/api/list",this.form)
          console.log(this.form);
        }
          // console.log(res);
          if(res.status==200||res.status==201){
            this.$router.push({
              path: '/list',
            })
          }
      }else{
        alert("请填写")
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.spanTab {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.active{
  border: 1px solid red;
}
</style>